<!-- SpecParams component-->
<template>
  <div>
    <el-row>
      <el-col>
        <el-button type="primary" size="mini" @click="dialogVisible = true"
          >添加参数</el-button
        >
      </el-col>
    </el-row>
    <el-table
      :data="specParams"
      style="width: 100%;margin: 10px 0"
      border
      stripe
      :highlight-current-row="true"
    >
      <el-table-column label="序号" type="index" width="80"></el-table-column>
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="是否是数字" prop="digital"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            icon="el-icon-edit"
            @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      @close="clearForm('form')"
      :close-on-click-modal="false"
      width="50%"
    >
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-width="100px"
        label-suffix=":"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="通用" prop="generic">
          <el-checkbox-group v-model="form.generic">
            <el-checkbox :label="true">通用</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="数值" prop="digital">
          <el-checkbox-group v-model="form.digital">
            <el-checkbox :label="true">数值</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="单位" prop="unit" v-if="form.digital">
          <el-input v-model="form.unit" placeholder="请输入单位"></el-input>
        </el-form-item>
        <el-form-item label="搜索" prop="searchable">
          <el-checkbox-group v-model="form.searchable">
            <el-checkbox :label="true">搜索</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog('form')">取消</el-button>
        <el-button type="primary" @click="submitForm('form')">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      specParams: [],
      dialogVisible: false,
      form: {
        name: "",
        generic: "",
        digital: '',
        searchable: '',
        unit: ''
      },
      rules: {},
    };
  },

  created() {
    this.querySpecParamsByGid(this.$route.params.gid);
  },
  computed: {
    dialogTitle() {
      return this.form.id ? "修改参数" : "添加参数";
    },
  },
  methods: {
    querySpecParamsByGid(gid) {
      this.$http
        .get(`/spec/params/${gid}`)
        .then((resp) => {
          this.specParams = resp.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleEdit(item) {},
    handleDelete(id) {},
    clearForm(formName) {},
    closeDialog(formName) {},
    submitForm(formName) {},
  },
};
</script>

<style lang="scss" scoped></style>
